<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>区域</title>
    <link rel="stylesheet" href="../../static/layui/css/layui.css" th:href="@{https://cdn.staticfile.org/layui/2.7.6/css/layui.css}">
    <script src="../../static/layui/jquery-3.4.1.min.js" th:src="@{https://cdn.bootcss.com/jquery/3.4.1/jquery.js}"></script>
    <script src="../../static/layui/layui.js" th:src="@{https://cdn.staticfile.org/layui/2.7.6/layui.js}"></script>
    <script src="../../static/layer/layer.js" th:src="@{https://cdn.staticfile.org/layer/3.5.1/layer.js}"></script>


</head>
<body>
<a class="layui-btn layui-btn-primary layui-border-green" th:onclick="addArea()">新增区划</a>
    <table id="areaDemo" lay-filter="Test"></table>
</body>
<script type="text/javascript" >/*th:inline="none"*/
var table = layui.table;
//执行渲染
table.render({
    elem:"#areaDemo" //指定元素表格元素选择器（推荐id选择器）
    ,url:'/mall-area-service/area/queryAreaLayUiPage'
    ,page:true
    ,title:'区域'
    ,limit:10
    ,skin:'line'//行边框风格
    ,even:true //开启隔行背景
    ,size: 'sm' //小尺寸的表格
    ,limits:[10,20,30,50,90]
    ,cols:[
        [
            {checkbox:true},
            {field:'areaId',title:'地区id', sort: true},
            {field:'fullName',title:'地区全称', sort: true},
            {field:'name',title:'地区名称'},
            {field:'treePath',title:'目录'},
            {field:'areaCode',title:'区域编码'},
            {field:'parentId',title:'父id'},
            {field:'isLeaf',title:'是否显示', sort: true},
            {field:'createDate',title:'创建时间', sort: true, templet: function (d) {
                    if (d.createDate && d.createDate !== '' && d.createDate !== null ) {
                        return layui.util.toDateString(d.createDate, 'yyyy-MM-dd HH:mm:ss')
                    } else {
                        return '';
                    }
                }
                },
            {field:'modifyDate',title:'修改时间', sort: true, templet: function (d) {
                    if (d.modifyDate && d.modifyDate !== '' && d.modifyDate !== null ) {
                        return layui.util.toDateString(d.modifyDate, 'yyyy-MM-dd HH:mm:ss')
                    } else {
                        return '';
                    }
                }},
            {field:'districtnumber',title:'域码'},
            {field:'isactive',title:'是否访问', sort: true},
        ]
    ]  //设置表头
});

//新增按钮
function addArea(){
    //在这里面输入任何合法的js语句
    layer.open({
        type: 1 //Page 层类型
        ,area: ['500px', '300px']
        ,title: 'Hello layer'
        ,shade: 0.6 //遮罩透明度
        ,maxmin: true //允许全屏最小化
        ,anim: 0 //0-6的动画形式，-1不开启
        ,content: '<div style="padding:50px;">这是一个非常普通的页面层，传入了自定义的 html</div>'
    });
}

</script>
</html>